<template>
  <view class="list">
    <view class="hd fboxRow Ycenter">
      <view class="flex1 color-000233 font32 fwb">评论 <text v-if="commentNum" class="color-6264A3 font24">({{commentNum}})</text></view>
      <view class="right color-6264A3 font24">
        <text>{{ likeNum }} 赞 </text>
        <text>{{ forwardNum }} 转发</text>
      </view>
    </view>
    <view class="bd">
      <view v-for="(item, index) in list" :key="index" class="user-comment fboxRow">
        <image class="avatar" mode="aspectFill" round :src="item.avatar"/>
        <view class="fboxCol flex1">
          <view class="sub-hd fboxRow Ycenter">
            <view class="flex1">{{item.realName}}</view>
            <view class="right"><u-icon name="more-dot-fill"></u-icon></view>
          </view>
          <view class="sub-bd mt10">
            <view class="content font28 color-000233">{{item.commentContent || item.content}}</view>
            <view class="reply-box mt20 color-121575" v-if="item.replyList.length">
              <view v-for="(item2, sub) in item.replyList" :key="sub">
                <text class="color-5280F6">{{item2.realName}}</text>
                <template v-if="item.replyType==1"> 回复<text class="color-5280F6">@{{item2.replyRealName}}</text>
                </template>
                ：{{item2.replyContent || item2.content}}
              </view>
              <view class="more" v-if="item.replyNum>2">查看全部{{item.replyNum}}条回复 <u-icon name="arrow-right-double"></u-icon></view>
            </view>
          </view>
          <view class="sub-ft fboxRow Ycenter">
            <view class="flex1 font24 color-a1a3cc">{{item.gmtCreate}}</view>
            <view class="right fboxRow Ycenter font24">
              <u-icon name="chat" color="#8E94B0"></u-icon>
              <view class="fboxRow Ycenter" style="margin-left: 20rpx; color: #8E94B0">
				  <u-icon style="margin-right: 8rpx" name="thumb-up"></u-icon>
                {{item.likeNum}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      list:{
        type: Array,
        default(){
          return []
        }
      },
      commentNum:{
        type: Number,
        default: 0
      },
      likeNum:{
        type: Number,
        default: 0
      },
      forwardNum:{
        type: Number,
        default: 0
      }
    },
    data() {
      return {
      };
    },
    methods: {}
  }
</script>

<style scoped>
  .list{padding: 30rpx;}
  .user-comment{padding-top: 37rpx;}
  .user-comment .avatar{width: 64rpx;margin-right: 20rpx;
    height: 64rpx;
    border-radius: 50%;}
  .user-comment .sub-hd{height: 64rpx}
  .user-comment .sub-ft{ margin-top: 30rpx; padding-bottom: 30rpx; color: #8E94B0;border-bottom: 1px solid #F0F1F5}
  .reply-box{
    padding: 30rpx;
    background: #F7F8FF;
    color:#121575;
    line-height: 60rpx;
    border-radius: 4rpx;}
  .color-5280F6{color: #5280F6}
</style>
